<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>遮罩层示例</title>
    <style>
        /* 遮罩层样式 */
        #overlay {
            display: none; /* 默认隐藏 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
            z-index: auto; /* 在页面内容之上 */
        }

        /* 表单容器样式 */
        .modal-content {
            position: absolute;
            top: 30%;
            left: 50%;
            width: 420px;
            height: 200px;
            background-color: rgba(255, 255, 255); /* 半透明黑色 */
            text-align: center;
        }


    </style>
</head>
<body>

<!-- 按钮 -->
<button onclick="showOverlay()">打开遮罩</button>

<!-- 遮罩层 -->
<div id="overlay">
    <div class="modal-content">
        <span class="close-btn" onclick="hideOverlay()">X</span>
        <form action="#" method="post" onsubmit="handleSubmit(event)">
            <label>
                姓名：<input type="text" name="username" placeholder="用户名">
            </label><br><br>
            <label>
                密码：<input type="password" name="password" placeholder="密码">
            </label><br><br>
            <input type="submit" value="保存">
        </form>
    </div>
</div>

<script>
    function showOverlay() {
        let overlay = document.getElementById('overlay');
        overlay.style.display = 'block'; // 显示遮罩层
    }

    function hideOverlay() {
        let overlay = document.getElementById('overlay');
        overlay.style.display = 'none'; // 隐藏遮罩层
    }

    // 点击遮罩层外部关闭遮罩
    document.getElementById('overlay').onclick = function (event) {
        console.log(event.target);
        console.log(this);
        if (event.target === this) { // 只有点击遮罩层本身才关闭
            hideOverlay();
        }
    };

    // 处理表单提交
    function handleSubmit(event) {
        event.preventDefault(); // 阻止默认提交行为

        // 这里可以添加你的表单处理逻辑，比如发送数据到服务器等
        console.log('表单数据:', new FormData(event.target));

        // 模拟提交后关闭遮罩
        hideOverlay();
    }
</script>

</body>
</html>